<template>
	<view class="page page-bg content-20">
		<view class="form-wrap">
			<view class="form-group form-group__text">
				<textarea class="form-group__from" maxlength="200" v-model="formData.content" :placeholder="placeholder" placeholder-class="placeholder-class" />
			</view>
		</view>
		<view class="form-wrap">
			<view class="form-group form-group__upload">
				<view class="form-group__title">相关图片<text class="desc">(最多6张)</text></view>
				<view class="form-group__con" >
					<view class="upload-item">
						<u-upload :action="action" :max-count='6' :max-size='3 * 1024 * 1024' @on-uploaded="onUploaded"></u-upload>
					</view>
				</view>
			</view>
		</view>
		<view class="circular-submit" @click="formSubmit">提交</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import api from '../../utils/api.js'
	export default {
		data() {
			return{
				common,
				placeholder: '请输入您的日记(最多200个字符)',
				formData: {
					content: '',
					imgArray: ''
				},
				action: common.apiHost + common.uploadPath,
				fileList: []
			}
		},
		
		methods: {
			// 图片上传
			onUploaded(res) {
				const that = this
				res = res || []
				let temp = []
				if(res.length > 0) {
					res.map(item => {
						let imgPath = item.response.result.result
						temp.push(imgPath)
					})
				}
				that.fileList = temp
				this.formData.imgArray = temp.join(',')
			},
			
			formSubmit() {
				let formData = this.formData
				if(!formData.content) { this.$showToast('请填写内容~'); return false }
				api.saveUserNote(formData, res => {
					this.$showToast('内容保存成功~')
					setTimeout(() => {
						this.$link('/pages/index/quanzi')
					}, 2000)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.form-wrap{
		margin-bottom: 20upx;
	}
	.form-group__upload{
		border-bottom: 1px solid $border-color !important;
	}
</style>
